import { ref, onMounted, onBeforeUnmount } from 'vue'
import { debounce } from 'lodash-es'

const MOBILE_BREAKPOINT = 768
const TABLET_BREAKPOINT = 1024

export function useResponsive() {
  const isMobile = ref(false)
  const windowWidth = ref(window.innerWidth)

  // 检查设备类型
  const checkDevice = debounce(() => {
    windowWidth.value = window.innerWidth
    isMobile.value = windowWidth.value < MOBILE_BREAKPOINT
  }, 200)

  // 设置断点变量
  const setBreakpoints = () => {
    document.documentElement.style.setProperty('--mobile-breakpoint', `${MOBILE_BREAKPOINT}px`)
    document.documentElement.style.setProperty('--tablet-breakpoint', `${TABLET_BREAKPOINT}px`)
  }

  onMounted(() => {
    checkDevice()
    setBreakpoints()
    window.addEventListener('resize', checkDevice)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', checkDevice)
  })

  return {
    isMobile,
    windowWidth,
    checkDevice,
    setBreakpoints
  }
} 